<template>
    <div class="top-right-btn" :style="style">
        <el-row class="pd0">
            <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"
                v-if="search">
                <el-button circle class="el-icon-search" @click="toggleSearch()" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                <el-button circle class="el-icon-refresh-right" @click="refresh()" />
            </el-tooltip>
        </el-row>
    </div>
</template>
<script>
export default {
  data() {
    return {
      
    }
  },
  props:{
    showSearch: {
      type: Boolean,
      default: true,
    },
    columns: {
      type: Array,
    },
    search: {
      type: Boolean,
      default: true,
    },
    gutter: {
      type: Number,
      default: 10,
    },
  },
  methods:{
    //刷新
    refresh(){
      this.$emit('queryTable');
    },
    //改变显示搜索
    toggleSearch(){
      this.$emit("changeShow",!this.showSearch)
    },
  },
  computed:{
    style(){
      const ret = {};
      if (this.gutter) {
          ret.marginRight = `${this.gutter / 2}px`;
      }
      return ret;
    }
  }

}
</script>
<style>
.pd0 {
    padding: 0px;
    padding-right: 0px;
}
.top-right-btn {
    float: right;
    margin-bottom: 10px;
    margin-right: 0px;
    padding-right: 0px;
}
:deep(.el-transfer__button) {
    border-radius: 50%;
    display: block;
    margin-left: 0px;
}

:deep(.el-transfer__button:first-child) {
    margin-bottom: 10px;
}

.my-el-transfer {
    text-align: center;
}
</style>